<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">确认下单</p>
    </van-nav-bar>
    <div class="address">
      <van-tag type="danger">地址</van-tag>
      <div class="detail van-ellipsis">{{ address }}</div>
    </div>
    <div class="shop">
      <van-card class="goods-card"
                @click-thumb="showDetail('/shopDetail/'+item.proid)"
                :price="Math.floor(item.originprice*item.discount/10).toFixed(2)"
                :title="item.proname"
                :thumb="item.img||item.img1" v-for="item in orderlist" :key="item.proid">
        <template #tags>
          <div style="margin-top: 5px">
            <van-tag plain color="#ffe1e1" text-color="#ad0000">{{
                item.size && item.size + '码'
              }}
            </van-tag>
            <van-tag plain color="#ffe1e1" text-color="#ad0000" style="margin-left:5px">{{
                item.count || item.num + '件'
              }}
            </van-tag>
          </div>
        </template>
      </van-card>
    </div>
    <van-cell-group style="margin-top: 10px">
      <van-cell title="收货人">
        <div>{{ person }}</div>
      </van-cell>
      <van-cell title="电话">
        <div>{{ phone }}</div>
      </van-cell>
    </van-cell-group>
    <van-button @click="takeOrder" type="danger" block round style="margin: 5px auto;width: 95%">立即支付</van-button>
  </div>
</template>

<script>
import { NavBar, Tag, Card, Dialog } from 'vant'
import Vue from 'vue'
import { requestOrder, requestShopCartlist, requestShopCartOrder } from '../../api/order'

Vue.use(NavBar)
Vue.use(Tag)
Vue.use(Card)

export default {
  name: 'Keep',
  data () {
    return {
      orderlist: [],
      address: '',
      product: {
        size: 'x',
        count: '0'
      },
      person: '',
      phone: '',
    }
  },
  activated () {
    this.loadFromDisk()
  },
  methods: {
    back () {
      this.$router.back()
    },
    showDetail (path) {
      this.$router.push(path)
    },
    // 从缓存中读取数据
    loadFromDisk () {
      const { mode } = this.$route.params
      const address = JSON.parse(localStorage.getItem('address'))
      const orderSingle = JSON.parse(localStorage.getItem('orderSingle'))
      if (mode === 'single') {
        this.product = orderSingle
        this.orderlist = [this.product]
      } else {
        requestShopCartlist().then(res => {
          this.orderlist = res.data
          console.log(this.orderlist)
        })
      }
      this.address = address.province + address.city + address.county + address.addressDetail
      this.person = address.name
      this.phone = address.tel
    },
    takeOrder () {
      const { mode } = this.$route.params
      const address = JSON.parse(localStorage.getItem('address'))
      const params = JSON.parse(localStorage.getItem('orderSingle'))
      params.addressid = address.addressid
      if (mode === 'single') {
        Dialog.confirm({
          title: '确认下单',
          message: '您确定要下单嘛',
        }).then(() => {
          requestOrder(params).then((res) => {
            setTimeout(() => {
              this.$toast({
                duration: 3000,
                message: res.msg
              })
            }, 1000)
            this.$router.replace('/')
          })
        })
      } else {
        Dialog.confirm({
          title: '确认下单',
          message: '您确定要购物车下单嘛',
        }).then(() => {
          requestShopCartOrder(address.addressid).then(res => {
            setTimeout(() => {
              this.$toast({
                duration: 3000,
                message: res.msg
              })
            }, 1000)
            this.$router.replace('/')
          })
        }).catch(() => {
          // on cancel
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  text-align: left;
  font-size: 14px;
  color: #222;
  overflow: auto;

  .address {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 12px;
    height: 40px;

    .detail {
      flex: 1;
      padding-left: 7px;
      font-size: 14px;
    }
  }

  .shop {
    margin-top: 10px;
    max-height: 300px;
    overflow: auto;

    .goods-card {
      margin: 0;
      padding: 15px 10px;
      background-color: #fff;
      text-align: left;
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .van-cell__title, {
    -webkit-flex: none;
    flex: none;
  }
}

</style>
